<!DOCTYPE html>
<title>A 'background-clip: text' background layer should blend with the underlying layer</title>
<script src="../../resources/ahem.js"></script>
<style>
#target {
  font: 100px/1 Ahem;
  background-image: linear-gradient(#f00, #f00), linear-gradient(#ff0, #ff0);
  background-color: red;
  background-blend-mode: difference, normal;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
</style>
<div id="target">X</div>
